<template>
	<view class="wrap" :style="colorStyle">
		<!-- <view class="top_box"></view> -->
		<view class="nav_box" :style="{height:navigatorHeight}">
			<view class="sys_bar" :style="{height:statusBarHeight}"></view>
			<view class="nav_info">
				<view class="back_icon" @click="$util.backHandle">
					<view class="iconfont icon-fanhui2"></view>
				</view>
				<!-- <view class="sys_title">{{$t('抢红包')}}</view> -->
				<view class="back_icon"></view>
			</view>
		</view>
		<view class="main" :class="{'no_click':info.status==1||info.status==2}">
			<view class="top_img">
				<image src="../static/imgs/cert1.png" mode="widthFix"></image>
			</view>

			<view class="form_box">
				<view class="return_box" v-if="info.status==3">
					驳回原因：{{info.fail_msg||'暂无'}}
				</view>
				<view class="title">
					1.上传营业执照
				</view>
				<view class="body">
					<view class="id_box">
						<view class="info_text">请上传珠宝相关行业《营业执照》照片，图片要求清晰完整无遮掩、平铺、能看清营业执照上法人、国徽等信息。</view>
						<view class="card_img flex_s">
							<view class="card_img_item" @click="upLoadOneImg(6)">
								<image :src="info.license_img" mode="aspectFill" v-if="info.license_img"></image>
								<image src="../static/imgs/trade.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
				</view>
				<view class="title">
					2.上传法人身份证
				</view>
				<view class="body">
					<view class="id_box">
						<view class="info_text">1.请上传清晰的<text style="color: #D43030;">与营业执照法人一致</text>的身份证正反面照片。</view>
						<view class="info_text">2.图片要求:边框完整且字体清晰，平铺，能看清本人的头像和姓名等信息。</view>
						<view class="card_img flex_s">
							<view class="card_img_item" @click="upLoadOneImg(1)">
								<image :src="info.face_img" mode="aspectFill" v-if="info.face_img"></image>
								<image src="../static/imgs/card_face.png" mode="aspectFill" v-else></image>
							</view>
							<view class="card_img_item" @click="upLoadOneImg(2)">
								<image :src="info.back_img" mode="aspectFill" v-if="info.back_img">
								</image>
								<image src="../static/imgs/card_back.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="tip_text">
						以下信息为证件上传后系统自动识别填充，请您仔细核对填充内容是否正确。
					</view>
					<view class="input_form">
						<view class="form_item flex_s">
							<text class="label">企业名称</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.license_enterprise_name" placeholder="请上传营业执照" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">信用代码</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.license_credit" placeholder="请上传营业执照" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">法人姓名</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.legalPerson" placeholder="请上传营业执照" />
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="input_form">
						<view class="form_item flex_s">
							<text class="label">身份证名</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.name" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">身份证号</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.id_number" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">有效截止</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.term_time" placeholder="请上传身份证" />
							</view>
						</view>
					</view>
					<view class="line"></view>
				</view>


				<view class="title" style="padding-top: 0;">
					3.填写您的手机号码
				</view>
				<view class="body">
					<view class="input_form">
						<view class="form_item flex_s">
							<view class="input_box flex_c mgl33">
								<input type="number" maxlength="11" v-model="info.phone" placeholder="请输入您的手机号码" />
								<view class="phone_box">
									<button class="phone_class" v-if="!userInfo.phone && isLogin" open-type="getPhoneNumber"
										@getphonenumber="getphonenumber">{{ $t(`快速绑定`) }}</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="wechat_pay flex_sb">
			<view class="left flex_s">
				<text class="iconfont icon-weixin3"></text>
				<view class="left_text">
					<text class="text1">微信支付</text>
					<text class="text2">限时特惠￥0/ 年</text>
				</view>
			</view>
			<view class="right">原价:<text class="mid_line">￥1999</text>/ 年</view>
		</view> -->
		<view class="footer flex_c">
			<template v-if="info.status">
				<view class="btn" :class="{'gray_btn':info.status==1}" @click="info.status==3?authenticate_apply():''">
					<text v-if="info.status==1">审核中</text>
					<text v-else-if="info.status==2">已通过</text>
					<text v-else>重新提交</text>
				</view>
			</template>
			<view class="btn" @click="authenticate_apply" v-else>
				提交审核
			</view>
		</view>
		<!-- <modal ref="modal" :content="info.fail_msg" :showTitle="true" :showCancel="false" @confirm="closeModal"></modal> -->
		<modal ref="modal2" :showCancel="false" content="提交成功等待平台审核" @confirm="konwHandle"></modal>
	</view>
</template>

<script>
	import modal from "@/components/modal/modal.vue";
	import {
		debounceImmediate
	} from "@/utils/validate";
	import {
		idCardRecognition,
		authenticate_apply,
		authenticate_info
	} from "@/api/new_api.js"
	import {
		mapGetters
	} from 'vuex';
	import colors from "@/mixins/color";
	import {
		getUserInfo,
		mpBindingPhone
	} from '@/api/user.js';
	import Routine from '@/libs/routine';
	export default {
		computed: mapGetters(['isLogin']),
		props: {
			modal
		},
		mixins: [colors],
		data() {
			return {
				statusBarHeight: 0,
				navigatorHeight: 0,
				status_txt: '提交审核',
				info: {
					license_img: '', //执照图
					license_enterprise_name: '', //企业名称
					legalPerson: '', //法人姓名
					license_credit: '', //企业代码
					license_json: {}, //企业-营业执照识别信息
					face_img: '', //正面
					back_img: '', //身份证反面
					authentication_data: '', //身份证正反面，接口识别的所有数据 json
					name: '', //身份证名
					id_number: '', //身份证号
					term_time: '', //有效日期
					phone: '', //手机号

				},
				is_type: 1, //图片朝向( 1 :身份证含照片的一面, 2:身份证带国徽的一面 6：营业执照正面)
				flog: false,
				userInfo:{
					phone:''
				}
			};
		},
		onLoad() {
			if (this.isLogin) this.getUserInfo();
			this.getNavHeight()

			this.authenticate_info()

		},
		methods: {
			getphonenumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					Routine.getCode()
						.then((code) => {
							let data = {
								code,
								iv: e.detail.iv,
								encryptedData: e.detail.encryptedData
							};
							mpBindingPhone(data)
								.then((res) => {
									this.getUserInfo(1);
									this.$util.Tips({
										title: res.msg,
										icon: 'success'
									});
								})
								.catch((err) => {
									return this.$util.Tips({
										title: err
									});
								});
						})
						.catch((error) => {
							uni.hideLoading();
						});
				}
			},
			getUserInfo: function(getInfo=0) {
				let that = this;
				getUserInfo().then((res) => {
					const data = res.data
					this.userInfo=data
					if(getInfo) that.authenticate_info()
				});
			},
			getNavHeight() {
				let globalData = getApp().globalData
				this.navigatorHeight = globalData.navigatorHeight + 'px'
				this.statusBarHeight = globalData.statusBarHeight + 'px'
			},
			konwHandle() {
				this.$refs.modal2.close()
				this.authenticate_info()
			},
			closeModal() {
				this.$refs.modal.close()
			},
			authenticate_info() {
				const params = {
					type: 2
				}
				authenticate_info(params).then((res) => {
					const data = res.data.info
					if (data) {
						this.info = data
						try {
							this.info.authentication_data = JSON.parse(data
								.authentication_data) //解析身份证信息，防止提交时重复json化
							this.info.license_json = JSON.parse(data.license_json) //解析营业执照，防止提交时重复json化
						} catch (error) {
							this.info.authentication_data = data.authentication_data
							this.info.license_json = data.license_json
							console.log(this.info.authentication_data);
							//TODO handle the exception
						}

						this.info.legalPerson = this.info.license_json.legalPerson //法人姓名接口不用传，次处为了回显处理
						console.log(this.info, "数据");
						// if (data.status == 3 && data.fail_msg) {
						// 	this.$refs.modal.open()
						// }
					} else {
						this.info.phone = this.userInfo.phone
					}
				})
			},
			upLoadOneImg(type) {
				if (this.flog) return
				this.flog = true
				this.is_type = type
				this.$util.uploadImageOne('upload/image', (res) => {
					const data = res.data
					switch (this.is_type) {
						case 1:
							this.info.face_img = data.url
							break;
						case 2:
							this.info.back_img = data.url
							break;
						default:
							this.info.license_img = data.url
							break;
					}

					this.idCardRecognition() //识别身份证
				}, (err) => {
					console.log(err, "失败");
				})
			},
			idCardRecognition() {
				uni.showLoading({
					title: '识别中...'
				})
				let imgpath = ''
				switch (this.is_type) {
					case 1:
						imgpath = this.info.face_img
						break;
					case 2:
						imgpath = this.info.back_img
						break;
					default:
						imgpath = this.info.license_img
						break;
				}
				const params = {
					imgpath,
					is_type: this.is_type
				}
				idCardRecognition(params).then((res) => {
					this.flog = false
					uni.hideLoading()
					console.log(res, "--------");
					if (res.status == 400) {
						console.log(res.msg, "--------");
						return this.$util.Tips({
							title: res.msg
						})
					}
					const data = res.data
					// 身份证ocr
					if (this.is_type == 1 || this.is_type == 2) {
						if (this.info.authentication_data)
							this.info.authentication_data = Object.assign(this.info.authentication_data, data)
						else
							this.info.authentication_data = data
					}
					switch (this.is_type) {
						case 1:
							this.info.name = data.name
							this.info.id_number = data.no
							break;
						case 2:
							this.info.term_time = data.expireDate
							break;
						default:
							this.info.license_json = data
							this.info.legalPerson = data.legalPerson
							this.info.license_enterprise_name = data.name
							this.info.license_credit = data.socialCreditCode
							break;
					}
					console.log(this.info.authentication_data, "---------------");
				}).catch((err) => {
					this.flog = false
					this.$util.Tips({
						title: err
					})
				})
			},
			authenticate_apply: debounceImmediate(function() {
				this.info.authentication_data = JSON.stringify(this.info.authentication_data)
				this.info.license_json = JSON.stringify(this.info.license_json)
				console.log(this.info, "参数");
				authenticate_apply(this.info).then((res) => {
					this.$refs.modal2.open()
				})
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.phone_class {
		color: var(--view-theme);
		background-color: #ffffff80;
		border-radius: 15px;
		width: fit-content;
		font-size: 24rpx;
		padding: 2px 10px;
		margin-top: 8rpx;
	}
	.no_click {
		pointer-events: none;
	}

	.wrap {
		padding-bottom: 200rpx;
		position: relative;

		.nav_box {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;

			.nav_info {
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 27rpx;

				.back_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;

					.iconfont {
						font-size: 40rpx;
					}
				}

				.sys_title {
					color: #3D3D3D;
				}
			}

		}

		.mgl33 {
			margin-left: 33rpx;
		}

		.wechat_pay {
			width: 700rpx;
			border-radius: 10rpx;
			margin: 16rpx auto 0;
			padding: 28rpx 27rpx;
			background: #fff;

			.left {

				.iconfont {
					font-size: 50rpx;
					color: #43CF7C;
				}

				.left_text {
					margin-left: 16rpx;

					.text1 {
						color: #303030;
						font-size: 28rpx;
						font-weight: 550rpx;
						margin-right: 18rpx;
					}

					.text2 {
						font-size: 24rpx;
						font-weight: 550rpx;
						color: #D43030;
					}
				}
			}

			.right {
				color: #8C8C8C;
				font-size: 24rpx;

				.mid_line {
					text-decoration: line-through;
				}
			}
		}

		.footer {
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 160rpx;
			padding-bottom: 50rpx;
			padding-top: 20rpx;
			background: #fff;

			.btn {
				width: 686rpx;
				height: 97rpx;
				text-align: center;
				line-height: 97rpx;
				background-color: var(--view-theme);
				border-radius: 54rpx;
				font-size: 32rpx;
				color: #fff;

			}

			.gray_btn {
				background: #868D9E;
			}
		}

		.top_box {
			position: absolute;
			height: 155rpx;
			width: 100%;
			background: var(--view-theme);
		}

		.main {
			position: relative;
			overflow: hidden;

			.top_img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				// padding-top: 20rpx;
				// width: 702rpx;
				height: auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.form_box {
				position: relative;
				width: 702rpx;
				margin: 776rpx auto 0;
				background-color: #fff;
				border-radius: 8rpx;
				padding-bottom: 32rpx;

				.return_box {
					position: absolute;
					top: -61rpx;
					left: 0;
					width: 100%;
					height: 61rpx;
					line-height: 61rpx;
					background: #FAEAEA;
					color: #D43030;
					font-size: 30rpx;
				}

				.body {
					.counter_box {
						padding-left: 65rpx;

						.masker_box {
							width: 300rpx;
							height: 185rpx;
							border-radius: 4rpx;
							background: #F6F6F6;

							.img_box {
								width: 58rpx;
								height: 58rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.input_form {
						display: grid;
						grid-row-gap: 20rpx;

						.form_item {
							padding: 0 24rpx 0 32rpx;

							.label {
								font-size: 32rpx;
								font-weight: 550;
								margin-right: 47rpx;
							}

							.input_box {
								position: relative;
								flex-grow: 1;

								height: 80rpx;
								border-radius: 4rpx;
								background: #F6F6F6;
								.phone_box{
									position: absolute;
									right: 10rpx;
									top: 50%;
									transform: translateY(-50%);
									z-index: 9;
								}
								input {
									width: 100%;
									padding-left: 20rpx;
								}
							}
						}
					}


					.tip_text {
						font-size: 28rpx;
						color: #808080;
						padding: 0 32rpx 32rpx;
					}

					.line {
						width: 100%;
						height: 4rpx;
						background: #F6F6F6;
						margin: 32rpx 0;
					}

					.id_box {

						padding-left: 65rpx;

						.info_text {
							font-size: 28rpx;
							color: #303030;
							line-height: 40rpx;
						}

						.card_img {
							margin-top: 20rpx;
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							grid-column-gap: 13rpx;

							.card_img_item {
								width: 300rpx;
								height: 185rpx;
								border-radius: 4rpx;
								overflow: hidden;
								background: #F6F6F6;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.title {
					font-size: 32rpx;
					font-weight: 550;
					margin-bottom: 18rpx;
					padding-top: 32rpx;
					padding-left: 32rpx;
				}
			}
		}

	}
</style>